<!-- 课程栏 -->
<template>
  <el-tabs v-model="tab" class="tabs-content">
    <el-tab-pane label="课程中心" v-loading="listMap[`tab${tab}`] && noticeLoading" key="notice">
      <lists :list="listMap[`tab0`]" @click-item="clickItem" />
    </el-tab-pane>
    <el-tab-pane label="我的课程" v-loading="listMap[`tab${tab}`] && noticeLoading" key="news">
      <lists :list="listMap[`tab1`]" @click-item="clickItem" />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import lists from './lists.vue'
import { usePageList } from '@/hooks/web/usePageList'
import { CourseApi } from '@/api/school/course'
import { useRouter } from 'vue-router'
const router = useRouter()
const tab = ref('0')
const toast = useMessage()
const query = ref({
  visibility: 0
})
const {
  list,
  loading: noticeLoading,
  getList
}: any = usePageList({
  toast,
  queryFn: CourseApi.getCourseList,
  query
})
const listMap = ref({})
watch(
  () => list.value,
  (val) => {
    listMap.value[`tab${tab.value}`] = val
  }
)
watch(
  () => tab.value,
  () => {
    query.value.visibility = tab.value === '0' ? 0 : 1
    if (!listMap.value[`tab${tab.value}`]?.length) getList(true)
  },
  {
    immediate: true
  }
)
const clickItem = () => {
  router.push('/course/garden/course-unit')
}
</script>
<style lang="scss" scoped>
.tabs-content {
  :deep() {
    .el-tab-pane {
      display: flex;
      gap: 20px;
    }

    .el-tabs__header {
      margin-bottom: 11px;
    }
  }
}
</style>
